<template>
    <div style="padding-top: 20px" class=" app_width">


        <el-form status-icon :model="orders" :rules="Rules" ref="ordersRef" label-width="120px">


            <el-form-item label="金额" prop="orders_all">
                {{ orders.orders_all }}元
            </el-form-item>

            <el-form-item label="收货地址" show-overflow-tooltip prop="ordersaddress" style="width: 350px">
                <el-input placeholder="请输入" type="text" v-model="orders.ordersaddress"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="memo" style="width: 350px">
                <el-input placeholder="请输入" type="text" v-model="orders.memo"></el-input>
            </el-form-item>


            <el-form-item>
                <el-button :loading="loading" type="primary" @click="saveData()"
                           icon="coin">模拟支付
                </el-button>
            </el-form-item>
        </el-form>

    </div>
</template>

<script name="orders_pay" setup>

import {onMounted, ref, watch} from "vue";

const postFormRef = ref(null) // 如果页面有表单,则使用此ref
const route = useRoute();   //获取路由中的信息或参数
const router = useRouter();   //操作路由,跳转之类的
import {ElMessage, ElMessageBox} from "element-plus";  //提示框和消息



import axios_request from '../../util/axios_request.js'
import {useRoute, useRouter} from "vue-router";
import {parseTime} from "../../util/index.js";

let formData = {}


const props = defineProps({         //数据ID,只在这个组件中使用
    dataId: {
        type: Number,
        default: 0
    },

    //0商品明细
    viewISevaluate: {
        type: Number,
        default: 0
    },
    //隐藏与显示,用于监控和初始,只在这个组件中使用
    dialogFormVisible: {
        type: Boolean,
        default: false
    },

})
const loading = ref(false)//加载提示


const orders = ref({}) //订单信息
const ordersRef = ref(null) //订单信息

const Rules = {
    ordersaddress: [{required: true, message: "请输入"}],

}


watch(() => route, newdata => {
    // 如果路由参数有变化，会再次执行获取列表数据
    getList()

}, {deep: true})

watch(() => props.dataId, newdata => {
    // 如果参数有变化，会再次执行获取列表数据
    getList()

}, {deep: true})


onMounted(() => {


    getList()

})


//关闭弹窗
const emits = defineEmits(['emits'])

function closeDialog() {
    //关闭的时候 不能恢复数据,如果恢复的话,会引起子组件,传递给父组件行数据出错
    emits('close') //事件通知父组件修改el-model的显示状态
}

//获取数据
function getList() {

    /*postForm.value = JSON.parse(JSON.stringify(formData))//初始化数据
    if (postFormRef.value) {
        //这个fetchData第一次是created调用的,界面还未初始化,resetFields功能是不可使用的
        //然后watch变化 后,再调用 就可以使用了
        postFormRef.value.resetFields()
    }//对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 只能在methods中使用
*/
    axios_request.get('/web/ordersDetail.action?id=' + props.dataId).then(response => {
        orders.value = response.data
    })

}

//保存数据
function saveData() {
    //console.dir(postForm.value.depidArray)
    //console.dir(postForm.value.depidArray)
    ordersRef.value.validate(valid => {


        if (valid) {


            ElMessageBox.confirm("确定进行此操作吗?", "提示").then(() => {
                orders.value.status = '已支付'
                orders.value.paytype = '模拟支付'
                orders.value.paydate = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}:{s}')
                var Num = "";
                for (var i = 0; i < 6; i++) {
                    Num += Math.floor(Math.random() * 10);
                }
                orders.value.paycode = Num//随机数
                axios_request.post('/web/updatemyorders.action', orders.value).then(response => {

                    ElMessage({
                        message: response.msg
                    })

                    if (response.msg) {
                        closeDialog()//必须在AJX异步过程内
                    }

                })
            })
        }
    })
}


</script>


